<template>
  <section class="sta-chart-container">
    <div v-if="selectedAreaId" class="sta-chart">
      <div class="health-score">
        <p>{{ totalData.area_name }}用电设备健康诊断</p> <!-- 使用selectedAreaId代替areaId -->
        <GaugeChart  :percentage="healthScore" :IndexDesc="44" />
      </div>
    </div>


    <div v-if="selectedAreaId" class="sta-chart">
      <div class="device-ranking">
        <h3>{{ totalData.area_name }}设备高功率运行时长排行 </h3>
        <el-table :data="deviceRanking" style="width: 100%;">
          <el-table-column label-class-name="my-label" class-name="my-content" label="设备名称"
            prop="name"></el-table-column>
          <el-table-column label-class-name="my-label" class-name="my-content" label="运行时长（小时）"
            prop="operatingHours"></el-table-column>
        </el-table>
      </div>
    </div>

    <div v-if="selectedAreaId" class="sta-chart">
      <div class="electricity-usage">
        <h3>{{ totalData.area_name }}过去七天用电量  </h3>
        <div class="bar-chart-container">
          <div class="y-axis-labels">
            <span v-for="tick in yAxisTicks" :key="tick">{{ tick }} KW</span>
          </div>
          <div class="bar-chart">
            <div v-for="(usage, index) in electricityUsage" :key="index" class="bar"
              :style="{ height: usage.value + '%', backgroundColor: usage.color }" :title="usage.tooltip"></div>
          </div>
        </div>
        <div class="x-axis-labels">
          <span v-for="(day, index) in daysOfWeek" :key="index" class="day-label">{{ day }}</span>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, computed, defineProps ,watch,onMounted} from 'vue';
import { ElTable, ElTableColumn } from 'element-plus';
import GaugeChart from './GaugeChart.vue';
import {areaDataService} from '@/services';
const props = defineProps(["areaId"]);
const totalData = ref({ area_name: '' }); // 设置默认值
const healthScore = ref(44);

const fetchData =async (areaId) => {
  const response = await areaDataService.getRegionDataService(areaId);
  totalData.value = response.data || { area_name: '' }; // 设置默认值
};
console.log("totalData.value",totalData.value)
console.log("totalData.area_name",totalData.value.area_name)
const deviceRanking = ref([
  { name: '设备A', operatingHours: 20 },
  { name: '设备B', operatingHours: 18 },
  { name: '设备C', operatingHours: 15 },
]);

const electricityUsage = ref([
  { value: 80, color: '#4CAF50', tooltip: '周一: 80KW' },
  { value: 60, color: '#2196F3', tooltip: '周二: 60KW' },
  { value: 90, color: '#FFC107', tooltip: '周三: 90KW' },
  { value: 70, color: '#9C27B0', tooltip: '周四: 70KW' },
  { value: 50, color: '#FF5722', tooltip: '周五: 50KW' },
  { value: 85, color: '#795548', tooltip: '周六: 85KW' },
  { value: 75, color: '#607D8B', tooltip: '周日: 75KW' },
]);

const yAxisTicks = ref([0, 20, 40, 60, 80, 100]);

const selectedAreaId = computed(() => props.areaId);

const daysOfWeek = ref(['周一', '周二', '周三', '周四', '周五', '周六', '周日']);

watch(() => props.areaId, fetchData);
onMounted(() => {
  if (props.areaId) {
    fetchData(props.areaId);
  } else {
    fetchData(''); // 替换为实际的默认区域ID
  }
});
</script>

<style scoped>
:deep(.my-label) {
  border: #2a2c42;
  background: #2a2c42 !important;
  color: #ffffff !important;
}
:deep(.my-content) {
  color: white !important;
  background: #2a2c42;
}
.sta-chart-container {
  display: flex;
  flex-direction: column;
  background-color: #2a2c42;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.sta-chart {
  flex: 1;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.health-score, .device-ranking, .electricity-usage {
  text-align: center;
  color: #ffffff;
}

.device-ranking h3, .electricity-usage h3 {
  font-size: 14px;
  color: #ffffff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  margin-bottom: 10px;
}

.bar-chart-container {
  display: flex;
  align-items: flex-start; /* Change to flex-start */
}

.bar-chart {
  display: flex;
  align-items: flex-end;
  height: 250px;
  flex: 1;
  position: relative;
}

.bar {
  width: 30px;
  margin-right: 4px;
  border-radius: 4px;
  transition: height 0.3s ease-out;
}

.bar:hover {
  background-color: #f44336;
  cursor: pointer;
}

.y-axis-labels {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-right: 8px;
  font-size: 9px;
  color: #ffffff;
  height: 250px; /* Add this */
}

.x-axis-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  left: 20px;
}

.day-label {
  font-size: 12px;
  flex: 1;
  text-align: center;
  color: #ffffff;
  font-weight: 500;
}
</style>
